<!--科研成果添加-->
<template>
  <div style="background-color: white;">
    <span style="color: grey">当前位置 >> 用户管理 >> 用户信息录入</span>
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
             :rules="formRules"
             style="width: 500px;margin-left: 350px;margin-top: 50px"
    >
      <el-form-item label="职工号" prop="pno" style="display: flex">
        <el-input type="text" v-model="ruleForm.pno" autocomplete="off" @blur.prevent="changepno()"></el-input>
        <span v-if="this.torf === false" style="font-size: 10px;color: red">{{ tSpan }}</span>
      </el-form-item>
      <el-form-item label="姓名" prop="pname">
        <el-input type="text" v-model="ruleForm.pname" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="psex">
        <el-switch
            style="margin-left: 20px"
            v-model="ruleForm.psex"
            active-text="女"
            inactive-text="男"
            active-value="0"
            inactive-value="1">
        </el-switch>
      </el-form-item>

      <el-form-item label="籍贯" prop="pnative">
        <el-input type="text" v-model="ruleForm.pnative" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="出生日期" prop="pbirth">
        <div class="block">
          <el-date-picker v-model="ruleForm.pbirth"
                          type="date" style="width: 400px" placeholder="请选择出生日期">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="职称" prop="competent">
        <el-input type="text" v-model="ruleForm.competent" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="所学专业" prop="discipline">
        <el-input type="text" v-model="ruleForm.discipline" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="现从事专业" prop="dodiscipline">
        <el-input type="text" v-model="ruleForm.dodiscipline" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="学历" prop="education">
        <el-input type="text" v-model="ruleForm.education" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="学位" prop="degree">
        <el-input type="text" v-model="ruleForm.degree" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="工作时间" prop="hworking">
        <el-input type="text" v-model="ruleForm.hworking" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="所在部门" prop="department">
        <el-input type="text" v-model="ruleForm.department" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="照片" prop="image">
        <el-upload
            class="upload-demo"
            drag
            action="http://222.21.119.252:9999/files/upload"
            multiple
            list-type="picture"
            :on-success="filesUploadSuccess"
            :on-error="filesUploadError"
            :before-upload="checkFileType"
            style="width: 400px"
            :data= fileVO
            :limit="1"
            :on-exceed='limitCheck'
            :on-remove="handleRemove"
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽上传 或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              上传的图片文件会自动重命名为职工号,故请先输入职工号;
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容" v-model="ruleForm.remark" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" @click="commit" style="width:100%; height:100%;margin-bottom:15px;">
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {UploadFilled} from "@element-plus/icons-vue";
import request from "@/utils/request";


export default {
  components: {
    UploadFilled
  },
  name: "addAchieve",
  data() {
    return {
      fileVO: {
        sort: 'user',
        fileName: ''
      },
      loadering: true,
      torf: true,
      tSpan: '该职工号已存在',
      ruleForm: {
        pno: '',
        pname: '',
        psex: '',
        pnative: '',
        pbirth: '',
        competent: '',
        discipline: '',
        dodiscipline: '',
        education: '',
        degree: '',
        hworking: '',
        department: '',
        image: '',
        remark: ''
      },
      formRules: {
        pno: [
          {required: true, message: '请输入职工号', trigger: 'blur'}
        ],
        pname: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        department: [
          {required: true, message: '请输入所在部门', trigger: 'blur'}
        ],
        pnative: [
          {required: true, message: '请输入籍贯', trigger: 'blur'}
        ],
        pbirth: [
          {required: true, message: '请选择出生日期', trigger: 'blur'}
        ],
        competent: [
          {required: true, message: '请输入职称', trigger: 'blur'}
        ],
        discipline: [
          {required: true, message: '请输入所学专业', trigger: 'blur'}
        ],
        dodiscipline: [
          {required: true, message: '请输入先从事专业', trigger: 'blur'}
        ],
        education: [
          {required: true, message: '请输入学历', trigger: 'blur'}
        ],
        degree: [
          {required: true, message: '请输入学位', trigger: 'blur'}
        ],
        image: [
          {required: true, message: '请上传照片', trigger: 'blur'}
        ],
        hworking: [
          {required: true, message: '请输入工作时间', trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    commit() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          this.$message.error("请输入必选项!")
          return
        }
        request.post("/sperson", this.ruleForm).then(res => {
          if (res.code === '200') {
            //弹出成功框
            this.$message.success("添加成功")
          } else {
            this.$message.error("请检查表单是否填写完整")
          }
        }).catch(() => {   //防止未知bug,执行不了Controller方法直接报错
          this.$message.error("服务器错误,请联系管理人员或重新尝试!");
        })
      })
    },

    //用来检查职工号是否重复
    changepno() {
      if (this.ruleForm.pno === '') {
        this.torf = true;
      } else {
        request.get(`/sperson/pno/` + this.ruleForm.pno).then(res => {
          if (res.code === '200') {
            //表示不重复 则可以用
            this.torf = true;
          } else {
            //重复 不可以用
            this.torf = false;
          }
        })
      }
    },
    filesUploadSuccess(res) {
      this.ruleForm.image = res.data;
    },
    checkFileType(file) {
      // 以检查文件是否为.jpg为例
      const fileNameName = file.name;
      const fileType = fileNameName.substring(fileNameName.lastIndexOf('.'));
      if(fileType === '.jpg' || fileType === '.jpeg' ||fileType === '.png') {
        if (this.ruleForm.pno === '') {
          this.$message.error("上传文件前请先输入职工号!");
          return false;
        }
      }else{
        this.$message.error("仅支持上传 jpg,jpeg,png 类型的图片")
        return false;
      }

      if (file.size / 1024 / 1024 > 100) {
        this.$message.error("文件大小不得超过100MB");
        return false;
      }

      //文件命名
      this.fileVO.fileName = this.ruleForm.pno;
    },
    limitCheck() {
      this.$message.warning('只能上传一个文件');
    },
    filesUploadError(res) {
      console.log(res);
      if (res.code === '201') {
        this.$message.error(res.data.msg);
      } else {
        this.$message.error("上传失败,请重新尝试或联系管理员");
      }
    },
    handleRemove() {
      request.delete("/files/"+this.fileVO.sort+ "/"+this.fileVO.fileName).then(res =>{
        if (res.code === '200') {
          this.$message.success("删除成功");
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },


  }
}
</script>

<style scoped>

</style>
